<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用状态</title>
</head>

<body>
    <h1>ref转发</h1>
    <p>ref转发，用于获取DOM节点，对于事件处理非常重要</p>
    <h2>使用方式</h2>
    <ol>
        <li>
            <p>字符串方式: 在DOM标签上使用ref="名称"，this.refs.名称访问DOM对象</p>
            <p>优点：较为简单</p>
        </li>
        <li>
            <p>使用回调函数：ref={(obj) => {}}此方法，会获取到dom对象，然后可以保存在当前类组件对象上。</p>
            <p>缺点：太复杂</p>
        </li>
        <li>
            <p>使用createRef()函数，ref={createRef函数创建的对象}</p>
            <p>优点：先创建后使用，代码清晰一点</p>
            <p>缺点：需要在构造函数中初始化</p>
        </li>
    </ol>
    <p>如果只是处理事件，获取事件的触发dom对象，可以使用事件回调函数 (obj) => {}其中obj.target就是dom对象</p>
    <div id="app"></div>

    <script src="../node_modules/react/umd/react.development.js"></script>
    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="../node_modules/babel-standalone/babel.min.js"></script>
    <script type="text/babel">

        // 状态使用：我们通过类组件来学习
        class MyCom extends React.Component {

            // 在构造方法中，使用this.state = {}的方式，来初始化组件的状态
            constructor(props) {
                super(props);
                this.state = {
                    name: "奉先",
                    age: 35,
                    school: "21中",
                    major: "电子商务",
                }
                this.schoolInput = React.createRef();
            }

            render() {
                // 类组件需要使用this来访问state
                return (
                    <div>
                        <p>姓名: {this.state.name}</p>
                        <p>年龄: {this.state.age}</p>
                        <p>学校: {this.state.school}</p>
                        <p>专业: {this.state.major}</p>
                        <div>
                            姓名：<input type="text" 
                            ref="nameInput" 
                            onInput={() => {this.setState({name: this.refs.nameInput.value})}}/>
                        </div>
                        <div>
                            年龄：<input type="number" 
                            ref={(inputObj) => {this.inputObj = inputObj}} 
                            onInput={() => {this.setState({age: this.inputObj.value})}}/>
                        </div>
                        <div>
                            学校：<input type="text" 
                            ref={this.schoolInput} 
                            onInput={() => {this.setState({school: this.schoolInput.current.value})}}/>
                        </div>
                        <div>
                            专业：<input type="text" 
                            onInput={(obj) => {this.setState({major: obj.target.value})}}/>
                        </div>
                    </div>

                )
            }

        }

        const app = document.querySelector("#app");
        const root = ReactDOM.createRoot(app);

        const dom = (
            <div>
                <MyCom />
            </div>)

        root.render(dom);
    </script>
</body>

</html>